<!--
 * Description: 估价、报价行内参考价查看
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/12/7 17:05
-->

<template>
  <div v-loading="isRequesting">
    <table class="proposedPrc">
      <tr>
        <th></th>
        <th>来源</th>
        <th>价格</th>
      </tr>
      <tr align="center" class="base-price">
        <td rowspan="2">Base</td>
        <td>SAP采购价</td>
        <td class="price">
          <span>
            {{ formData.baseSapPurchasePrice ? formData.baseSapPurchasePrice : '暂无价格' }}
          </span>
        </td>
      </tr>
      <tr align="center" class="base-price">
        <td>Tec Pool</td>
        <td class="price">
          <span>{{ formData.baseTecPrice ? formData.baseTecPrice : '暂无价格' }}</span>
        </td>
      </tr>
      <tr align="center" class="new-price">
        <td rowspan="3">New</td>
        <td>SAP采购价</td>
        <td>
          <span>
            {{ formData.newSapPurchasePrice ? formData.newSapPurchasePrice : '暂无价格' }}
          </span>
        </td>
      </tr>
      <tr align="center" class="new-price">
        <td>Tec Pool</td>
        <td>
          <span>{{ formData.newTecPrice ? formData.newTecPrice : '暂无价格' }}</span>
        </td>
      </tr>
      <tr align="center" class="new-price">
        <td>FD Temp Code</td>
        <td>
          <span>{{ formData.fdTempCodePrice ? formData.fdTempCodePrice : '暂无价格' }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { fdRowQueryReferencePrice } from '@/api/quote/fd-row'

export default {
  name: 'FdReferencePrice',
  props: {
    fdRowId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {},
      isRequesting: false
    }
  },

  created() {
    this.pageDataInit()
  },
  methods: {
    pageDataInit() {
      this.getReferencePrice()
    },
    //  参考价格
    async getReferencePrice() {
      try {
        this.isRequesting = true
        const { data: res } = await fdRowQueryReferencePrice({
          fdRowId: this.fdRowId
        })
        this.formData = res
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    // 取消
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item__content span {
  margin-left: 5px;
  color: blue;
}
.proposedPrc {
  border-collapse: collapse;
  width: 100%;
  th {
    background-color: #706f6f;
    color: #fff;
  }
  th,
  td {
    border: 1px solid #ccc;
    height: 40px;
  }
  .base-price {
    background-color: #ffd966;
    color: #333333;
  }
  .new-price {
    background-color: #2f75b5;
    color: #fff;
  }
  .price span {
    color: #2f75b5;
  }
}
</style>
